<template>
  <div class="cates">
    <div class="cates_left">
      <ul>
        <li
          :class="{ active: activeMenu === i }"
          v-for="(cateLeft, i) in cates"
          :key="cateLeft.id"
          @click="menuClick(i)"
        >
          {{ cateLeft.cate_name }}
        </li>
      </ul>
    </div>
    <div class="cates_right">
      <div class="cr_wrapper" ref="scrollContainer" @scroll="scrollEvent">
        <div
          ref="cr_items"
          class="cr_item"
          v-for="cateRight in cates"
          :key="cateRight.id"
        >
          <h3>{{ cateRight.cate_name }}</h3>
          <ul>
            <li v-for="goods in cateRight.children" :key="goods.id">
              <img :src="goods.pic" alt="" />
              <p>{{ goods.cate_name }}</p>
            </li>
          </ul>
        </div>
        <div style="height: 500px"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cates: [],
      activeMenu: 0, // 左侧菜单高亮
      initCalcTops: true,
      tops: [], // 存右侧区域滚动的高度
      isSmoothing: false, // 是否在点击左侧菜单
      timer: null,
    };
  },
  created() {
    this.$axios.get("http://demo26.crmeb.net/api/category").then(({ data }) => {
      this.cates = data.data;
    });
  },
  updated() {
    if (this.initCalcTops) {
      let sumHeight = 0;
      this.tops.push(sumHeight);
      this.$refs.cr_items.forEach(div => {
        sumHeight += div.clientHeight;
        this.tops.push(sumHeight);
      });
      this.initCalcTops = false;
    }
  },
  methods: {
    menuClick(i) {
      this.isSmoothing = true;
      this.activeMenu = i;
      // 1. 锚点定位：利用a标签的href设置为某个元素的id值。(没法设置平滑的过渡效果，瞬间回到顶部区域)
      // 2. scrollTo({top: 100, behavie: 'smooth'}
      // this.$refs.scrollContainer.scrollTo({
      //   top: this.tops[i],
      //   behavior: "smooth", // 平滑过渡效果
      // });

      // 3. scrollIntoView(); 让指定的元素出现在视图的顶部
      // console.log(this.$refs.cr_items[i]);
      this.$refs.cr_items[i].scrollIntoView({
        behavior: "smooth", // 平滑过渡效果
      });
      // 注意：使用scrollTo和scrollIntoView的平滑过渡效果，会影响元素的滚动事件。
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.isSmoothing = false;
      }, 600);
    },
    scrollEvent(e) {
      if (!this.isSmoothing) {
        const scrollTop = e.target.scrollTop;
        // [0,620,860,1195....]
        const idx = this.tops.findIndex(totalHeight => scrollTop < totalHeight);
        this.activeMenu = idx - 1;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.cates {
  height: calc(100vh - 81px);
  display: flex;
  .cates_left {
    flex-shrink: 0;
    width: 100px;
    height: 100%;
    overflow-y: scroll;
    background-color: lightblue;
    &::-webkit-scrollbar {
      display: none;
    }
    li {
      height: 60px;
      line-height: 60px;
      text-align: center;
      position: relative;
      &.active {
        color: blue;
        background: #fff;
      }
      &.active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 60px;
        background: blue;
      }
    }
  }
  .cates_right {
    flex-shrink: 0;
    width: calc(100vw - 100px);
    .cr_wrapper {
      height: 100%;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
    }

    h3 {
      text-align: center;
      height: 40px;
      line-height: 40px;
      font-weight: normal;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 10px;
      li {
        width: 33%;
        text-align: center;
        margin-bottom: 10px;
        img {
          width: 60px;
          height: 60px;
        }
      }
    }
  }
}
</style>
